<template name="swiperDot">
	<view class="swiperDotBox">
		<slot></slot>
		<view class="dotCnt">
			<view class="roundBox" v-if="dots.type=='default'" :style="{
				'position':(dots.globalStyle.side=='outSide'?'relative':'absolute'),
				'margin-top':(dots.globalStyle.side=='outSide'?dots.globalStyle.bottom:-(dots.normalStyles.height+dots.globalStyle.bottom))+'px',
			}">
				<block v-for="(item,index) in list" :key="index">
					<view :style="{
						'width':(index==current?dots.activeStyle.width:dots.normalStyles.width)+'px',
						'height':(index==current?dots.activeStyle.height:dots.normalStyles.height)+'px',
						'border-radius':(index==current?dots.activeStyle.borderRadius:dots.normalStyles.borderRadius)+'px',
						'background-color':(index==current?dots.activeStyle.backgroundColor:dots.normalStyles.backgroundColor),
						'border':(index==current?dots.activeStyle.border:dots.normalStyles.border),
						'margin-left':dots.globalStyle.space/2+'px',
						'margin-right':dots.globalStyle.space/2+'px'
					}"></view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'swiperDot', //组件名称
		// 传递参数
		props: {
			// swiper数据
			list: {
				type: Array,
				default () {
					return []
				}
			},
			current: {
				type: Number,
				default: 0
			},
			// dots样式
			dotsOption: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		// 组件参数
		data() {
			return {
				dots: {
					type: 'default',
					globalStyle: {
						space: 6,
						side: 'inSide',
						bottom: 6
					},
					normalStyles: {
						width: 8,
						height: 8,
						borderRadius: 4,
						backgroundColor: 'rgba(0,0,0,0.4)',
						border: 'none',
						color: ''
					},
					activeStyle: {
						width: 8,
						height: 8,
						borderRadius: 4,
						backgroundColor: 'rgba(0,0,0,1)',
						border: 'none',
						color: ''
					}
				},
			}
		},
		created() {
			this.dots= Object.assign(this.dots, this.dotsOption)
		}


	}
</script>

<style lang="less">
	@import "../../common/public.less";

	.swiperDotBox {
		position: relative;
		width: 100%;

		.roundBox {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
